﻿<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage/Admin.Master"
    CodeBehind="OutletReview.aspx.vb" Inherits="GoodAnotApp.OutletReview" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <title id="pageTitle" runat="server"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/mc-bootstrap-modal.js" type="text/javascript"></script>
    <script src="Common/Amcharts 2.5/amcharts/amcharts.js" type="text/javascript"></script>
    <script src="Common/Amcharts 2.5/amcharts/raphael.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap-twipsy.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap-popover.js" type="text/javascript"></script>
    <script type="text/javascript">
        function pageLoad() {
            var mpe = $find("ModalPopupExtenderLogin");
</script>
    <style type="text/css">
        #apContent
        {
            left: 43% !important;
        }
        #sideContent
        {
            position: absolute !important;
            left: 43% !important;
        }
        .ratingText
        {
            font: ariel;
            font-size: 12px;
            color: Green;
        }
        .sortBy
        {
            color: #FF9933;
            margin-top: 5px;
        }
        
        .style8
        {
            height: 18px;
        }
        .newReviewText
        {
            color: #D12026;
            font-weight: bold;
            font-family: Arial, serif;
            margin-top: 10px;
            font-size: 13px;
            border-top: 0px;
        }
        .style10
        {
            width: 234px;
        }
        .outletTable
        {
            border-collapse: separate;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: 1px solid #DDD;
        }
        .inputs-list label
        {
            display: block;
            float: none;
            width: auto;
            padding: 0;
            margin-left: 20px;
            line-height: 18px;
            text-align: left;
            white-space: normal;
        }
        .inputs-list input[type="radio"], .inputs-list input[type="checkbox"]
        {
            margin-bottom: 0;
            margin-left: -20px;
            float: left;
            width: auto;
            height: auto;
            padding: 0;
            margin: 3px 0;
            line-height: normal;
            border: none;
        }
        .style12
        {
            width: 253px;
            padding: 0px 0px 0px 0px;
        }
        .style13
        {
            width: 100%;
            height: 400px;
        }
        
        #ContentPlaceHolder1_btnCloseDetailModal
        {
            -khtml-opacity: 1;
            opacity: 1;
            font-size: 13px;
        }
        .style14
        {
            height: 16px;
        }
        .style15
        {
            float: right;
            color: #000000;
            font-size: 20px;
            font-weight: bold;
            line-height: 13.5px;
            text-shadow: 0 1px 0 #ffffff;
            filter: alpha(opacity=25);
            -khtml-opacity: 0.25;
            -moz-opacity: 0.25;
            opacity: 0.25;
            width: 12px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <asp:Accordion ID="accordionFollowShop" Style="margin-left: 0px; z-index: 5" runat="server"
        SelectedIndex="-1" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"
        AutoSize="None" RequireOpenedPane="false" Height="681px">
        <Panes>
            <asp:AccordionPane ID="accordionPaneFollowShop" runat="server">
                <Header>
                    <table class="bordered-table" height="40px" width="180px" style="margin-top: 30px;">
                        <tr bgcolor="#CCFFFF">
                            <td style="padding-top: 2px; padding-bottom: 2px">
                                <a href="" onclick="return false;" class="Link">
                                    <h5 style="color: #808080;">
                                        Follow Branch
                                    </h5>
                                </a>
                            </td>
                        </tr>
                    </table>
                </Header>
                <Content>
                    <table class="bordered-table" height="400px" width="180px">
                        <tr>
                            <td>
                                <asp:Accordion ID="AccordionFavourite" Style="margin-left: 0px" runat="server" SelectedIndex="-1"
                                    FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"
                                    RequireOpenedPane="false">
                                    <Panes>
                                        <asp:AccordionPane ID="AccordionPane1" runat="server">
                                            <Header>
                                                <table width="150px" style="background-color: #C0C0C0">
                                                    <tr style="background-color: #C0C0C0">
                                                        <td>
                                                            <span style="font-size: small; color: #FFFFFF; background-color: #C0C0C0; font-weight: bold;">
                                                                Your Followed Branches </span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </Header>
                                            <Content>
                                                <table class="table table-striped" width="130px">
                                                    <tr>
                                                        <td style="border-top: 0px">
                                                            <asp:SqlDataSource ID="SqlDataSourceFollowedBranches" runat="server" ConnectionString="<%$ ConnectionStrings:yijungoodAnotDBConnectionString %>"
                                                                SelectCommand="SELECT follow_shop.outlet_ID, outlet.name, user_account.display_name, business.name AS Expr1 FROM follow_shop INNER JOIN outlet ON follow_shop.outlet_ID = outlet.outlet_ID INNER JOIN user_account ON follow_shop.user_ID = user_account.user_ID INNER JOIN business ON outlet.business_ID = business.business_ID WHERE (follow_shop.user_ID = @user_ID)">
                                                                <SelectParameters>
                                                                    <asp:ControlParameter ControlID="hfUser" Name="user_ID" PropertyName="Value" />
                                                                </SelectParameters>
                                                            </asp:SqlDataSource>
                                                            <asp:ListView ID="ListViewFollowedBranches" OnItemCommand="ListViewFollowedBranches_ItemCommand"
                                                                DataSourceID="SqlDataSourceFollowedBranches" runat="server">
                                                                <ItemTemplate>
                                                                    <table border="0" width="130px">
                                                                        <tr>
                                                                            <asp:HiddenField ID="hfOutlet" runat="server" Value='<%# Eval("outlet_ID")%>' />
                                                                            <td style="border-top: 0px" width="150px">
                                                                                <asp:HyperLink ID="hlOutletName" runat="server" NavigateUrl='<%# string.concat("OutletReview.aspx?id=", Eval("outlet_ID")) %>'
                                                                                    Text='<%# string.concat(Eval("Expr1") ,"-",Eval("name"))%>' Value='Eval("name")'></asp:HyperLink>
                                                                            </td>
                                                                            <td align="right" valign="top" style="border-top-color: #808080; text-align: right;
                                                                                border-left: 0px; border-top-width: 0px; border-left-width: 0px;">
                                                                                <asp:LinkButton ID="lbDeleteFS" runat="server" CommandName="deleteFollowShop" ForeColor="Red"
                                                                                    Font-Size="12px" Font-Bold="true" CausesValidation="False">X</asp:LinkButton>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </ItemTemplate>
                                                                <EmptyDataTemplate>
                                                                    <span>No Followed Branch</span>
                                                                </EmptyDataTemplate>
                                                            </asp:ListView>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </Content>
                                        </asp:AccordionPane>
                                    </Panes>
                                </asp:Accordion>
                            </td>
                        </tr>
                        <tr>
                            <td style="border-top: 0px">
                                <asp:Button ID="btnAddThisBranch" class="label" Style="width: 150px; height: 50px;"
                                    runat="server" Text="Add This Branch" />
                            </td>
                        </tr>
                        <tr style="border-top: 0px">
                            <td style="font-size: x-small; padding-top: 0px; padding-bottom: 0px; border-top: 0px">
                                Add your favorite branch to Follow Shop List .
                                <br></br>
                                Updates of the your favourite branch will be send to you weekly.<br></br>
                                It makes it easy to find the shop in the future.
                            </td>
                        </tr>
                    </table>
                </Content>
            </asp:AccordionPane>
        </Panes>
    </asp:Accordion>
    <asp:Panel ID="pnlRecommend" runat="server" Style="margin-top: 30px;" class="ui-widget-content ui-corner-all">
        <table>
            <tr>
                <td>
                    <b style="color: #D12020">You may also like :</b>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:ImageButton ID="ibRec1" Height="107px" Width="150px" ImageUrl="IhttpHandler.ashx?id=3"
                        runat="server" />
                    <br />
                    <asp:HyperLink ID="hlOutletRec1" runat="server">Outlet 1 </asp:HyperLink>
                </td>
            </tr>
            <tr>
                <td style="border-top:0px">
                    <asp:ImageButton ID="ibRec2" Height="107px" Width="150px" ImageUrl="IhttpHandler.ashx?id=3"
                        runat="server" /><br />
                    <asp:HyperLink ID="hlOutletRec2" runat="server">Outlet 2 </asp:HyperLink>
                </td>
            </tr>
            <tr>
                <td style="border-top:0px">
                    <asp:ImageButton ID="ibRec3" Height="107px" Width="150px" ImageUrl="IhttpHandler.ashx?id=3"
                        runat="server" /><br />
                    <asp:HyperLink ID="hlOutletRec3" runat="server">Outlet 3 </asp:HyperLink>
                </td>
            </tr>
        </table>
    </asp:Panel>
    <asp:HiddenField ID="hfUser" Value="0" runat="server" />
    <asp:Panel ID="pnlAdminUpdate" Visible="false" runat="server" Height="400px" Width="180px">
        <table width="100%">
            <tr>
                <td style="padding-top: 5px; padding-bottom: 5px">
                    <h4 style="color: Red;">
                        Report Details
                    </h4>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblAdminUpdateTitle" runat="server"></asp:Label>
                    <asp:TextBox ID="tbxAdminUpdateComments" Width="100%" Height="300px" runat="server"
                        Enabled="True" Text=" Comment Details" TextMode="MultiLine" ReadOnly="True"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnResolved" runat="server" class="btn success" Text="Resolved" /><asp:Button
                        ID="btnDeleteBusiness" runat="server" class="btn danger" Text="Delete business" /><asp:Button
                            ID="btnDeleteOutlet" class="btn danger" runat="server" Text="Delete outlet" />
                </td>
            </tr>
        </table>
    </asp:Panel>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <%--For Facebook plugin--%>
    <div id="fb-root">
    </div>
    <script>
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        } (document, 'script', 'facebook-jssdk'));
    </script>
    <%--end facebook plugin--%>
    <div id="outletInfo" style="top: 300px; margin-left: 10px; width: 945px;" runat="server">
        <table width="100%">
            <tr>
                <td colspan="6">
                    <h3>
                        <asp:Label ID="lblBusinessName" runat="server" Text="Business Name" Font-Bold="True"
                            ForeColor="#D12020"></asp:Label></h3>
                </td>
            </tr>
            <tr>
                <td colspan="3" rowspan="3">
                    <asp:Image ID="imgBusiness" Style="margin-left: 70px" class="media-gridImg" runat="server"
                        Height="150px" Width="210px" />
                </td>
                <td width="145px" height="20px">
                    <h5>
                        Category</h5>
                </td>
                <td width="12px">
                    <h5>
                        :</h5>
                </td>
                <td width="300px" valign="middle" style="padding-top: 20px">
                    <asp:Label ID="lblCategory" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td width="145px" height="20px">
                    <h5>
                        Website</h5>
                </td>
                <td width="12px">
                    <h5>
                        :</h5>
                </td>
                <td valign="middle" style="padding-top: 20px">
                    <asp:LinkButton ID="lbWebsite" runat="server">Click here</asp:LinkButton>
                </td>
            </tr>
            <tr>
                <td width="145px" height="20px" valign="top">
                    <h5>
                        Details</h5>
                    &nbsp;
                </td>
                <td width="12px" valign="top">
                    <h5>
                        :</h5>
                    &nbsp;
                </td>
                <td valign="top">
                    <asp:TextBox ID="tbxDetails" runat="server" Style="resize: none;" Height="64px" ReadOnly="True"
                        TextMode="MultiLine" Width="270px"></asp:TextBox>
                    &nbsp;
                    <br />
                    <asp:LinkButton ID="lbEditBusiness" Style="margin-left: 150px" runat="server" ForeColor="#999999">Edit Company Details</asp:LinkButton>
                </td>
            </tr>
            <tr>
                <td width="145px" height="20px">
                    <h5>
                        Outlet</h5>
                </td>
                <td width="12px">
                    <h5>
                        :</h5>
                </td>
                <td valign="middle">
                    <asp:DropDownList ID="ddlOutlets" runat="server" Height="19px" Width="270px" Style="margin-top: 10px"
                        AutoPostBack="True">
                    </asp:DropDownList>
                </td>
                <td width="145" style="padding-top: 16px; padding-left: 130px">
                    <asp:HiddenField ID="hfTwitterText" runat="server" />
                    <a href="https://twitter.com/share" class="twitter-share-button" data-text='<%=hfTwitterText.value%>'
                        data-count="none" data-hashtags="GoodAnot">Tweet</a>
                    <script type="text/javascript">                        !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } } (document, "script", "twitter-wjs");</script>
                </td>
                <td style="padding-top: 16px" colspan="2">
                    <div class="fb-like" data-send="false" data-width="300" data-show-faces="false" data-action="recommend">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3" rowspan="2">
                    <asp:UpdatePanel ID="updatePanelOutletDetails" runat="server">
                        <ContentTemplate>
                            <div class="outletTable">
                                <table>
                                    <tr>
                                        <td width="145px" style="border-top: 0px">
                                            <h5 style="border-top: 0px">
                                                Address</h5>
                                        </td>
                                        <td width="12px" style="border-top: 0px">
                                            <h5>
                                                :</h5>
                                        </td>
                                        <td class="style10" style="border-top: 0px">
                                            <asp:Label ID="lblAddress" runat="server" Text="Label"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="145px">
                                            <h5>
                                                Opening hours</h5>
                                        </td>
                                        <td width="12px">
                                            <h5>
                                                :</h5>
                                        </td>
                                        <td class="style10">
                                            <asp:Label ID="lblOpeningHrs" runat="server" Text="Label"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h5>
                                                Telephone No.</h5>
                                        </td>
                                        <td width="12px">
                                            <h5>
                                                :</h5>
                                        </td>
                                        <td class="style10">
                                            <asp:Label ID="lblTelNo" runat="server" Text="Label"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td valign="top">
                                            <h5>
                                                Remarks</h5>
                                        </td>
                                        <td width="12px" valign="top">
                                            <h5>
                                                :</h5>
                                        </td>
                                        <td class="style10">
                                            <asp:TextBox ID="tbxRemarks" runat="server" Style="resize: none; margin-bottom: 5px"
                                                Height="70px" ReadOnly="True" TextMode="MultiLine" Width="195px"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddlOutlets" EventName="SelectedIndexChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
                <td colspan="3" valign="top" style="padding-left: 120px">
                    <asp:UpdatePanel ID="updatePanelChart" runat="server">
                        <ContentTemplate>
                            <table class="outletTable" style="line-height: 0px">
                                <tr>
                                    <td>
                                        <asp:Label ID="lblRating" runat="server" Text="Overall rating : " Font-Bold="True"
                                            Font-Names="Arial,Helvetica,sans-serif" Font-Size="20pt" ForeColor="#D12020"></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div id="chartdiv" style="width: 340px; height: 200px;">
                                        </div>
                                        <div style="margin-left: 265px">
                                            <asp:LinkButton ID="lbDetails" data-controls-modal="detailmodal" data-backdrop="static"
                                                class="btn danger" runat="server">details</asp:LinkButton></div>
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddlOutlets" EventName="SelectedIndexChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                    <script type="text/javascript">
                        $(document).ready(function () {

                            var domModal = $("#detailmodal").modal({
                                backdrop: true, //Show a grey back drop
                                closeOnEscape: true, //Can close on escape
                                modal: true //display it as a modal
                            });


                            $('#btnCloseDetailModal').live('click', function () {
                                domModal.modal('hide');
                            });
                        });
       
                    </script>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                </td>
                <td style="padding-left: 160px; border-top: 0px">
                    <asp:LinkButton ID="lbEditOutlet" runat="server" ForeColor="#999999">Edit Branch Details</asp:LinkButton>
                </td>
            </tr>
            <tr>
                <td colspan="6" width="175px">
                    <asp:HiddenField ID="hfQuality" runat="server" Value="5" />
                    <asp:HiddenField ID="hfValue" runat="server" Value="4" />
                    <asp:HiddenField ID="hfService" runat="server" Value="3" />
                    <asp:HiddenField ID="hfOverall" runat="server" Value="4" />
                    <asp:HiddenField ID="hfSort" runat="server" Value="date" />
                    <asp:HiddenField ID="hfAscDesc" runat="server" Value="desc" />
                </td>
            </tr>
            <tr>
                <td colspan="6" style="border-top: 0px">
                    <asp:Label ID="lblCombined" runat="server" Text="Rating" Font-Bold="True" Font-Names="Arial,Helvetica,sans-serif"
                        Font-Size="20pt" ForeColor="#D12020"></asp:Label>
                </td>
            </tr>
            <%--  Script to generate the ratings chart--%>
            <script type="text/javascript">

                var chart;

                var chartData = [{ ratings: "Quality", ratingValue: document.getElementById('<%=hfQuality.clientID %>').value, color: "#FF9E01" },
				{ ratings: "Service", ratingValue: document.getElementById('<%=hfValue.clientID %>').value, color: "#0D8ECF" },
				{ ratings: "Value", ratingValue: document.getElementById('<%=hfService.clientID %>').value, color: "#04D215" },
				{ ratings: "Overall", ratingValue: document.getElementById('<%=hfOverall.clientID %>').value, color: "#754DEB" }
			];

                AmCharts.ready(function () {
                    // SERIAL CHART
                    chart = new AmCharts.AmSerialChart();
                    chart.dataProvider = chartData;
                    chart.categoryField = "ratings";
                    // the following two lines makes chart 3D
                    chart.depth3D = 20;
                    chart.angle = 30;

                    // AXES
                    // category
                    var categoryAxis = chart.categoryAxis;
                    categoryAxis.labelRotation = 45;
                    categoryAxis.dashLength = 5;
                    categoryAxis.gridPosition = "start";

                    // value
                    var valueAxis = new AmCharts.ValueAxis();
                    valueAxis.title = "Value";
                    valueAxis.dashLength = 5;
                    valueAxis.maximum = 5;
                    chart.addValueAxis(valueAxis);


                    // GRAPH            
                    var graph = new AmCharts.AmGraph();
                    graph.valueField = "ratingValue";
                    graph.colorField = "color";
                    graph.balloonText = "[[category]]: [[value]]";
                    graph.type = "column";
                    graph.lineAlpha = 0;
                    graph.fillAlphas = 1;
                    chart.addGraph(graph);

                    // WRITE
                    chart.write("chartdiv");
                });
            </script>
        </table>
    </div>
    <asp:Panel ID="pnlAddReview" runat="server" Width="95%" Height="455px" Visible="false"
        class="outletTable" Style="margin-left: 20px; margin-bottom: 20px">
        <table style="border-top-style: none; border-top-color: inherit; border-top-width: 0px;"
            class="style13">
            <tr>
                <td style="font-size: 20px; color: #D12026; border-top: 0px" width="500" colspan="2">
                    Write review for :
                </td>
                <td style="border-top: 0px" rowspan="6">
                    &nbsp; &nbsp;<br />
                    &nbsp;<table style="width: 100%;">
                        <tr>
                            <td class="newReviewText" colspan="2">
                                Quality
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Rating ID="ratingQuality" runat="server" CssClass="ratingStar" CurrentRating="2"
                                    EmptyStarCssClass="Empty" FilledStarCssClass="Filled" MaxRating="5" StarCssClass="ratingItem"
                                    WaitingStarCssClass="Saved">
                                </asp:Rating>
                            </td>
                        </tr>
                        <tr>
                            <td class="newReviewText" colspan="2">
                                Value
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Rating ID="ratingValue" runat="server" CssClass="ratingStar" CurrentRating="2"
                                    EmptyStarCssClass="Empty" FilledStarCssClass="Filled" MaxRating="5" StarCssClass="ratingItem"
                                    WaitingStarCssClass="Saved">
                                </asp:Rating>
                            </td>
                        </tr>
                        <tr>
                            <td class="newReviewText" colspan="2">
                                Service
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Rating ID="ratingService" runat="server" CssClass="ratingStar" CurrentRating="2"
                                    EmptyStarCssClass="Empty" FilledStarCssClass="Filled" MaxRating="5" StarCssClass="ratingItem"
                                    WaitingStarCssClass="Saved">
                                </asp:Rating>
                            </td>
                        </tr>
                        <tr class="newReviewText">
                            <td colspan="2" class="newReviewText">
                                <br />
                                Verdict
                            </td>
                        </tr>
                        <tr>
                            <td class="style12">
                                <div class="input" style="margin-left: 0px">
                                    <ul class="inputs-list">
                                        <li>
                                            <asp:RadioButton ID="rbVerdict1" runat="server" GroupName="rbVerdict" Text="Cannot make it" />
                                            &nbsp;</li>
                                        <li>
                                            <asp:RadioButton ID="rbVerdict2" runat="server" Checked="True" GroupName="rbVerdict"
                                                Text="So-so only" />
                                            &nbsp;</li>
                                        <li>
                                            <asp:RadioButton ID="rbVerdict3" runat="server" GroupName="rbVerdict" Text="Good lah" />
                                            &nbsp;</li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <asp:Button ID="btnNewReviewConfirm" runat="server" Style="margin-top: 20px" Text="Confirm"
                                    ValidationGroup="newReview" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="border-top: 0px; text-align: right">
                    <asp:LinkButton ID="lbCancelNewReview" ForeColor="Red" valign="top" align="right"
                        Font-Bold="true" runat="server" CausesValidation="False">X</asp:LinkButton>
                </td>
            </tr>
            <tr>
                <td style="border-top: 0px" colspan="2">
                    <asp:Label ID="lblCombinedNew" runat="server" Font-Bold="True" Font-Size="14pt" ForeColor="#D12020"
                        Text="Name of outlet"></asp:Label>
                </td>
                <td style="border-top: 0px">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td class="newReviewText" colspan="2">
                    Title
                </td>
                <td style="border-top: 0px">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td class="style8" style="border-top: 0px" colspan="2">
                    <asp:TextBox ID="tbxNewReviewTitle" MaxLength="49" runat="server" ValidationGroup="newReview"
                        Width="397px"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbxNewReviewTitle"
                        ErrorMessage="*" ForeColor="#D12026" ValidationGroup="newReview"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="newReviewText" colspan="2">
                    Review :
                </td>
                <td style="border-top: 0px">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td rowspan="4" style="color: #D12026; font-weight: bold; font-family: Arial, serif;
                    margin-top: 10px; font-size: 13px; border-top: 0px" align="left" valign="top">
                    <asp:TextBox ID="tbxReviewContent" MaxLength="299" align="top" runat="server" Height="174px"
                        ValidationGroup="newReview" Width="400px" TextMode="MultiLine"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxReviewContent"
                        ErrorMessage="*" ForeColor="#D12026" ValidationGroup="newReview"></asp:RequiredFieldValidator>
                </td>
                <td align="left" rowspan="4" style="color: #D12026; font-weight: bold; font-family: Arial, serif;
                    margin-top: 10px; font-size: 13px; border-top: 0px" valign="top">
                    &nbsp;
                </td>
            </tr>
        </table>
    </asp:Panel>
    <table width="100%" style="margin-bottom: 0px">
        <tr>
            <td class="sortByContainer">
                <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Sort by:</strong>&nbsp;
                <asp:LinkButton ID="lbSortDate" runat="server" ForeColor="#FF9933">Date </asp:LinkButton>
                &nbsp;
                <asp:Image ID="imgDateAsc" runat="server" ImageUrl="~/Styles/Images/sortUp.gif" />
                <asp:Image ID="imgDateDesc" runat="server" ImageUrl="~/Styles/Images/sortDown.gif" />|
                <asp:LinkButton ID="lbSortRating" runat="server" ForeColor="#FF9933">Rating</asp:LinkButton>
                &nbsp;
                <asp:Image ID="imgRatingAsc" runat="server" ImageUrl="~/Styles/Images/sortUp.gif" />
                <asp:Image ID="imgRatingDesc" runat="server" ImageUrl="~/Styles/Images/sortDown.gif" />|
                <asp:LinkButton ID="lbSortHelpful" runat="server" ForeColor="#FF9933">Helpfulness</asp:LinkButton><asp:Image
                    ID="imgHelpfulAsc" runat="server" ImageUrl="~/Styles/Images/sortUp.gif" />
                <asp:Image ID="imgHelpfulDesc" runat="server" ImageUrl="~/Styles/Images/sortDown.gif" />
            </td>
            <td class="sortByContainer" align="right" style="right: 5px">
                <asp:Button ID="btnNewReview" class="btn" runat="server" Text="Write new review"
                    ClientIDMode="Static" causevalidation="false" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Button ID="btnFollowOutlet" class="btn" runat="server" Text="Follow this outlet !"
                    CausesValidation="False" />
            </td>
        </tr>
    </table>
    <div id="reviews" style="top: 300px;" runat="server" class="style14">
        <asp:ListView ID="lvReview" OnItemCommand="ListView1_ItemCommand" runat="server"
            DataSourceID="SqlDataSourceReviews" GroupItemCount="3">
            <EmptyDataTemplate>
                <table id="Table1" runat="server" style="">
                    <tr>
                        <td>
                            No reviews yet
                        </td>
                    </tr>
                </table>
            </EmptyDataTemplate>
            <GroupTemplate>
                <tr id="itemPlaceholderContainer" runat="server">
                    <td id="itemPlaceholder" runat="server">
                    </td>
                </tr>
            </GroupTemplate>
            <ItemTemplate>
                <table style="border: 1px solid #808080; margin-top: 18px; margin-bottom: 0px; padding-top: 0px"
                    width="100%" class="bordered-table">
                    <tr>
                        <td width="130px" style="border-top-color: #808080; border-left: 0px; border-right: 0px">
                            <asp:Image ID="imgProfile" runat="server" Height="60px" Width="60px" Style="padding: 0px 0px 0px 0px;
                                margin: 0px 0px 0px 28px" class="media-gridImg" />
                        </td>
                        <td width="110px" style="font-size: 12px; border-top-color: #808080; border-left: 0px;
                            border-right: 0px">
                            Quality :
                            <div class="rating_bar">
                                <div id="ratingQualityStar" style="width: 40%" runat="server">
                                </div>
                            </div>
                            <asp:Label ID="rating_qualityLabel" runat="server" Visible="false" Text='<%# Eval("rating_quality") %>' />
                        </td>
                        <td width="110px" style="font-size: 12px; border-top-color: #808080; border-left: 0px;
                            border-right: 0px">
                            Value :
                            <div class="rating_bar">
                                <div id="ratingValueStar" style="width: 40%" runat="server">
                                </div>
                            </div>
                            <asp:Label ID="rating_valueLabel" runat="server" Visible="false" Text='<%# Eval("rating_value") %>' />
                        </td>
                        <td width="110px" style="font-size: 12px; border-top-color: #808080; border-left: 0px;
                            border-right: 0px">
                            Service :
                            <div class="rating_bar">
                                <div id="ratingServiceStar" style="width: 40%" runat="server">
                                </div>
                            </div>
                            <asp:Label ID="rating_serviceLabel" runat="server" Visible="false" Text='<%# Eval("rating_service") %>' />
                        </td>
                        <td width="110px" style="font-size: 12px; border-top-color: #808080; border-left: 0px;
                            border-right: 0px">
                            Overall :
                            <div class="rating_bar">
                                <div id="ratingOverallStar" style="width: 40%" runat="server">
                                </div>
                            </div>
                            <asp:Label ID="rating_overallLabel" runat="server" Visible="false" Text='<%# Eval("rating_overall") %>' />
                        </td>
                        <td width="300px" style="font-size: 16px; color: #FF6666; border-top-color: #808080;
                            border-left: 0px; border-right: 0px">
                            <asp:Label ID="rating_verdictLabel" runat="server" Text='<%# Eval("rating_verdict") %>' />
                        </td>
                        <td colspan="2" align="right" valign="top" style="border-top-color: #808080; text-align: right;
                            border-left: 0px">
                            <asp:LinkButton ID="lbDelete" runat="server" CommandName="deleteReview" ForeColor="Red"
                                Font-Size="12px" Font-Bold="true" CausesValidation="False">X</asp:LinkButton>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 12px; color: blue; border-right: 0px; border-bottom: 0px; margin-left: 10px;
                            text-align: center">
                            <asp:Label ID="display_nameLabel" runat="server" Text='<%# Eval("display_name") %>' />
                        </td>
                        <td colspan="4" rowspan="3" style="border-left: 0px; border-right: 0px">
                            <asp:Label ID="idLabel" runat="server" Visible="false" Font-Bold="True" Font-Size="12px"
                                Font-Names="Calibri (Body)" Text='<%# string.concat("#RID", Eval("review_ID")," - ") %>' />
                            <asp:Label ID="titleLabel" runat="server" Text='<%# Eval("title") %>' Font-Bold="True"
                                Font-Size="12px" Font-Names="Calibri (Body)" />
                            <br>
                            <asp:Label ID="review_dateLabe" runat="server" Text='<%# Eval("review_date", "{0:dd/MM/yyyy}") %>'
                                Font-Name="Ariel" Font-Size="11.5px" /><br>
                            <asp:Label ID="review_contentLabel" runat="server" Font-Size="12px" Text='<%# Eval("review_content") %>'
                                ForeColor="#77787B" />
                        </td>
                        <td colspan="2" rowspan="3" style="border-left: 0px; border-right: 0px">
                            <asp:Label ID="review_IDLabel" runat="server" Visible="false" Text='<%# Eval("review_ID") %>' />
                            <br />
                            <asp:Label ID="user_IDLabel" runat="server" Visible="false" Text='<%# Eval("user_ID") %>' />
                            <br />
                            <asp:Label ID="reviewer_IDLabel" runat="server" Visible="false" Text='<%# Eval("reviewer_ID") %>' />
                        </td>
                        <td style="border-left: 0px">
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 12px; border-top: 0px; border-right: 0px; text-align: center">
                            <asp:Label ID="reviews_noLabel" runat="server" Text='<%# Eval("reviews_no") %>' />
                            reviews
                            <br />
                        </td>
                        <td style="border-top: 0px; border-left: 0px">
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 12px; text-align: center" rowspan="2" valign="top">
                            Joined :<br />
                            <asp:Label ID="user_joinedLabel" runat="server" Text='<%# Eval("user_joined", "{0:dd/MM/yyyy}") %>' />
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 12px; margin-right: 0px" colspan="4">
                            <br />
                            Helpfulness :
                            <asp:Label ID="helpfulnessLabel" runat="server" Text='<%# Eval("helpfulness") %>' />
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Was this review helpful ?
                            <asp:LinkButton ID="lbHelpfulYes" runat="server" ForeColor="Green" CommandName="helpfulYes">yes</asp:LinkButton>
                            <asp:Label ID="lblHelpfulYes" runat="server" Text=""></asp:Label>
                            or
                            <asp:LinkButton ID="lbHelpfulNo" runat="server" ForeColor="red" CommandName="helpfulNo">no</asp:LinkButton>
                            <asp:Label ID="lblHelpfulNo" runat="server" Text=""></asp:Label>
                        </td>
                        <td valign="bottom" style="vertical-align: bottom; padding: 0px 0px 0px 0px; border-left: 0px;
                            text-align: right" colspan="3">
                            <asp:LinkButton ID="lbReportReview" runat="server" ToolTip="Report as inappropriate"
                                CommandName="reportReview" ForeColor="Red" Font-Size="10px">report</asp:LinkButton>
                            &nbsp; &nbsp;
                        </td>
                    </tr>
                </table>
                <asp:Accordion ID="accordionNewComment" Style="margin-left: 100px" runat="server"
                    SelectedIndex="-1" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"
                    AutoSize="None" RequireOpenedPane="false" OnItemCommand="accordionComment_ItemCommand"
                    ContentCssClass='<%# string.concat("accordionNewComment||",Eval("review_ID") ) %>'>
                    <Panes>
                        <asp:AccordionPane ID="accordionPaneNewComment" runat="server">
                            <Header>
                                <table class="bordered-table" style="margin-bottom: 0px" width="99.38%">
                                    <tr>
                                        <td width="100%">
                                            <a href="" onclick="return false;" class="Link">Add new comment</a>
                                        </td>
                                    </tr>
                                </table>
                            </Header>
                            <Content>
                                <table class="bordered-table" style="margin-bottom: 0px" width="100%">
                                    <tr>
                                        <td style="border-top: 0px; padding: 0px 0px 0px 10px" colspan="2">
                                            <h5>
                                                New comment</h5>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="border-top: 0px; padding-top: 5px; border-right: 0px">
                                            <asp:TextBox ID="tbxNewCommentText" Style="resize: none;" runat="server" Height="60px"
                                                TextMode="MultiLine" Width="750px" MaxLength="299" ValidationGroup="newComment"></asp:TextBox>
                                        </td>
                                        <td style="border-top: 0px; padding-top: 40px; border-left: 0px">
                                            <asp:Button ID="btnSubmitComment" Width="65px" CommandName="newComment" CommandArgument='<%# Eval("review_ID") %>'
                                                OnClick="btnSubmitComment_Click" class="btn" runat="server" Text="Submit" CausesValidation="true" />
                                        </td>
                                    </tr>
                                </table>
                            </Content>
                        </asp:AccordionPane>
                    </Panes>
                </asp:Accordion>
                <%--  Nested List view for comment--%>
                <asp:ListView ID="lvComments" OnItemDataBound="lvComments_ItemDataBound" runat="server"
                    DataKeyNames="comment_ID" DataSourceID="SqlDataSourceComments">
                    <ItemTemplate>
                        <table class="bordered-table" style="margin-left: 100px; margin-bottom: 0px" width="89.2%">
                            <tr>
                                <td width="120px" height="18px" style="padding: 10px 10px 3px 10px; border-right: 0px">
                                    <asp:Label ID="idLabelComments" Visible="false" runat="server" Style="font-size: 12px;
                                        color: blue" Text='<%# string.concat("#CID",Eval("comment_ID"), " - ") %>' />
                                    <asp:Label ID="display_nameLabel" runat="server" Style="font-size: 12px; color: blue"
                                        Text='<%# Eval("display_name") %>' />
                                </td>
                                <td rowspan="2" height="33px" style="padding: 10px 0 0 0 0; border-left: 0px">
                                </td>
                                <td width="120px" align="right" style="text-align: right; padding: 10px 0 0 0; border-left: 0px;
                                    border-bottom: 0px" height="18px">
                                    <asp:LinkButton ID="lbDeleteComment" runat="server" CommandName="deleteComment" ForeColor="Red"
                                        Font-Size="12px" Font-Bold="true" CommandArgument='<%# Eval("comment_ID") %>'>X  </asp:LinkButton>
                                    &nbsp; &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="120px" height="15px" style="padding: 0px 10px 3px 10px; border-top: 0px;
                                    border-right: 0px">
                                    <asp:Label ID="date_createdLabel" runat="server" Style="font-family: Ariel; font-size: 11px;"
                                        Text='<%# Eval("date_created", "{0:dd/MM/yyyy}") %>' />
                                </td>
                                <td width="120px" height="15px" style="padding: 0 0 0 0; border-top: 0px; border-left: 0px">
                                </td>
                            </tr>
                            <tr>
                                <td style="border-top: 0px" height="auto" colspan="2">
                                    <asp:Label ID="Label1" Style="color: #77787B; font-size: 12px;" runat="server" Text='<%# Eval("comment_content") %>' />
                                </td>
                                <td valign="bottom" style="vertical-align: bottom; padding: 0px 0px 0px 0px; border-left: 0px;
                                    border-top: 0px; text-align: right">
                                    <asp:LinkButton ID="lbReportComment" runat="server" ToolTip="Report as inappropriate"
                                        Style="" CommandName="reportComment" ForeColor="Red" Font-Size="10px" CommandArgument='<%# Eval("comment_ID") %>'> report </asp:LinkButton>
                                    &nbsp; &nbsp;
                                    <asp:Label ID="user_IDLabel" Style="display: none" runat="server" Text='<%# Eval("user_ID") %>' />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                    <LayoutTemplate>
                        <div style="" id="itemPlaceholderContainer" runat="server">
                            <span runat="server" id="itemPlaceholder" />
                        </div>
                        <div style="margin-left: 800px; right: 0px">
                            <asp:DataPager ID="dataPager2" runat="server">
                                <Fields>
                                    <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False"
                                        ShowPreviousPageButton="False" />
                                    <asp:NumericPagerField />
                                    <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False"
                                        ShowPreviousPageButton="False" />
                                </Fields>
                            </asp:DataPager>
                        </div>
                    </LayoutTemplate>
                </asp:ListView>
                <%-- Data source for second list view--%>
                <asp:SqlDataSource ID="SqlDataSourceComments" runat="server" ConnectionString="<%$ ConnectionStrings:goodAnotDBConnectionStringSearch %>"
                    SelectCommand="SELECT comment.review_ID, comment.comment_ID, comment.user_ID, comment.date_created, comment.comment_content, user_account.display_name FROM comment INNER JOIN user_account ON comment.user_ID = user_account.user_ID WHERE (comment.review_ID = @reviewID) ORDER BY comment.date_created DESC"
                    ProviderName="System.Data.SqlClient">
                    <SelectParameters>
                        <asp:Parameter Name="reviewID" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </ItemTemplate>
            <LayoutTemplate>
                <div id="groupPlaceholderContainer" runat="server" border="0" style="">
                    <span id="groupPlaceholder" runat="server"></span>
                </div>
                <div>
                    <asp:DataPager ID="DataPager1" runat="server">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False"
                                ShowPreviousPageButton="False" />
                            <asp:NumericPagerField />
                            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False"
                                ShowPreviousPageButton="False" />
                        </Fields>
                    </asp:DataPager>
                </div>
            </LayoutTemplate>
        </asp:ListView>
        <br />
    </div>
    <asp:SqlDataSource ID="SqlDataSourceReviews" runat="server" ConnectionString="<%$ ConnectionStrings:goodAnotDBConnectionString %>"
        SelectCommand="SELECT review.rating_quality, review.rating_value, review.rating_service, review.rating_overall, review.rating_verdict, review.helpfulness, review.date_created AS review_date, review.review_content, outlet.name, review.title, review.review_ID
        , review.reviewer_ID, user_account.display_name, user_account.reviews_no, user_account.date_created AS user_joined, user_account.user_ID FROM review INNER JOIN outlet ON review.outlet_ID = outlet.outlet_ID INNER JOIN user_account ON review.reviewer_ID = user_account.user_ID WHERE (review.outlet_ID = @outlet_ID) ORDER BY (CASE @ascdsc WHEN 'desc' THEN (CASE @sort WHEN 'date' THEN review.date_created WHEN 'rating' THEN rating_overall WHEN 'helpfulness' THEN helpfulness END) END) DESC, (CASE @ascdsc WHEN 'asc' THEN (CASE @sort WHEN 'date' THEN review.date_created WHEN 'rating' THEN rating_overall WHEN 'helpfulness' THEN helpfulness END) END)">
        <SelectParameters>
            <asp:ControlParameter ControlID="ddlOutlets" DefaultValue="" Name="outlet_ID" PropertyName="SelectedValue" />
            <asp:ControlParameter ControlID="hfAscDesc" DefaultValue="desc" Name="ascdsc" PropertyName="Value" />
            <asp:ControlParameter ControlID="hfSort" DefaultValue="date" Name="sort" PropertyName="Value" />
        </SelectParameters>
    </asp:SqlDataSource>
    <!-- The Modal Dialog  -->
    <div id="detailmodal" class="modal fade" style="visibility: hidden/visible">
        <asp:HiddenField ID="hfDetailChart1" runat="server" />
        <asp:HiddenField ID="hfDetailChart2" runat="server" />
        <asp:HiddenField ID="hfDetailChart3" runat="server" />
        <asp:HiddenField ID="hfDetailChart4" runat="server" />
        <asp:HiddenField ID="hfDetailChart5" runat="server" />
        <div class="modal-header">
            <a href="#" class="style15">¡Ñ</a>
            <h2>
                Overall Rating distribution, stars</h2>
        </div>
        <div class="modal-body" style="overflow-x: visible; overflow-y: visible">
            <div id="chartdistri" style="overflow-x: visible; overflow-y: visible; width: 500px;
                height: 300px;">
            </div>
        </div>
        <div class="modal-footer">
            <a id="btnCloseDetailModal" href="#" class="btn danger close" runat="server">Close</a>
        </div>
    </div>
    <%--  Nested List view for comment--%>
    <script type="text/javascript">
        var chartDist;

        var chartDistData = [{
            star: 5,
            ratings: document.getElementById('<%=hfDetailChart5.clientID %>').value, color: "#99FF33"
        }, {
            star: 4,
            ratings: document.getElementById('<%=hfDetailChart4.clientID %>').value, color: "#FFCC00"
        }, {
            star: 3,
            ratings: document.getElementById('<%=hfDetailChart3.clientID %>').value, color: "#FF9900"
        }, {
            star: 2,
            ratings: document.getElementById('<%=hfDetailChart2.clientID %>').value, color: "#FF6600"
        }, {
            star: 1,
            ratings: document.getElementById('<%=hfDetailChart1.clientID %>').value, color: "#FF3300"

        }];


        AmCharts.ready(function () {
            // SERIAL CHART
            chartDist = new AmCharts.AmSerialChart();
            chartDist.dataProvider = chartDistData;
            chartDist.categoryField = "star";
            // this single line makes the chart a bar chart, 
            // try to set it to false - your bars will turn to columns                
            chartDist.rotate = true;
            // the following two lines makes chart 3D
            chartDist.depth3D = 20;
            chartDist.angle = 30;

            // AXES
            // Category
            var categoryAxis = chartDist.categoryAxis;
            categoryAxis.gridPosition = "start";
            categoryAxis.axisColor = "#DADADA";
            categoryAxis.fillAlpha = 1;
            categoryAxis.gridAlpha = 0;
            categoryAxis.fillColor = "#FAFAFA";
            categoryAxis.title = "Stars";

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisColor = "#DADADA";
            valueAxis.title = "Rating distribution";
            valueAxis.integersOnly = true;
            valueAxis.gridAlpha = 0.1;
            chartDist.addValueAxis(valueAxis);

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.title = "Distribution";
            graph.valueField = "ratings";
            graph.type = "column";
            graph.colorField = "color";
            graph.balloonText = "[[value]] users rated [[category]] star";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            chartDist.addGraph(graph);

            // WRITE
            chartDist.write("chartdistri");
        });
    </script>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</asp:Content>
